<template>
  <div ref="map" style="width: 1000px; height: 800px"></div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.loadProvinceMap('河南')
  },
  methods: {
    loadProvinceMap (name) {
      let childChart = this.$echarts.init(this.$refs.map)
      var jiangsu_shengData = require("@/assets/mapJson/jiangsu_sheng.json")
      this.$echarts.registerMap(name, jiangsu_shengData)
      childChart.setOption({
        visualMap: [
          {
            type: "piecewise",
            show: true,
            // splitNumber:4
            pieces: [
              // 分段
              { min: 1500 },
              { min: 50, max: 1500 },
              { min: 10, max: 49 },
              { min: 1, max: 9 },
              { value: 0, color: "#fff" }
            ],
            // align:"right",// 默认left
            // orient:"horizontal" 默认竖直
            // left right 这些属性控制 分段坐在的位置
            // showLabel:false
            textStyle: {
              color: "#C9CED8"
            },
            inRange: {
              symbol: "rect",
              color: ['lightskyblue', 'yellow', 'orangered']
            },
            itemWidth: 20,
            itemHeight: 10
          }
        ],

        tooltip: {
          // 移入区域信息提示弹框
          formatter: function (params) {
            const value = isNaN(params.value) ? 0 : params.value
            return (
              " <div> " +
              "<p>" +
              params.name +
              "</p>" +
              "<p>自定义弹框：" +
              value +
              "</p>" +
              "</div>"
            )
          }
        },
        series: [{
          type: 'map',
          mapType: name,
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data: [{ name: '徐州市', value: 20057.34 },
          { name: '连云港市', value: 207.34 },
          { name: '宿迁市', value: 2007.34 },
          { name: '扬州市', value: 207.34 },
          { name: '盐城市', value: 97.34 },
          { name: '南通市', value: 197.34 },
          { name: '镇江市', value: 807.34 },
          { name: '无锡市', value: 7.34 },
          { name: '南京市', value: 57.34 }],
          itemStyle: {
            normal: {
              borderColor: '#000', //地图区域边框颜色
              // areaColor: 'red' // 地图区域背景色
            },
            emphasis: {
              areaColor: 'red', // 鼠标移入区域背景颜色
              borderColor: 'purple', // 鼠标移入区域边框颜色
              borderWidth: 3, //鼠标移入区域边框宽度
            }
          },
          markPoint: {
            // 自定义图形标注
            // symbolSize: [90, 25], // 标注尺寸
            symbolOffset: ["50%", "-50%"], // 偏移量（默认图形中心对应经纬度坐标）
            symbol: "arrow", // 标注点样式'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            silent: false, // 是否相应鼠标事件
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  let value = parseFloat(params.value).toLocaleString()
                  return "{b|" + value + "}" + "{c|" + "万条" + "}"
                },
                rich: {
                  b: {
                    color: "#CCEEFE",
                    fontSize: 18
                  },
                  c: {
                    color: "#8C98A4",
                    fontSize: 12
                  }
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#000", // 标注点背景色
                color: ["#000"], // 标注点文字颜色
                borderColor: ["red"] // 标注点边框色
              },
              emphasis: {
                color: ["red"], //鼠标移入标记点颜色
              }
            },
            markArea: {
              itemStyle: {
                normal: {
                  color: ["#7FFFD4"],
                  borderColor: ["rgba(127, 255, 0, 0.7)"],
                }
              }
            },
            // 标记点的数据
            data: [
              {
                name: "我是标记点1",
                value: "999",
                coord: [119, 34],
              },
              {
                name: "我是标记点2",
                value: "68",
                coord: [118, 34],
              }
            ]
          },
          animation: true
        }]
      })
    }
  }
}
</script>